<template>
    <div v-if="!disable" class="detail-model">
        <div class="model-box">
            <div class="model-content">
                <input class="form-control" v-model="task.title" type="text" placeholder="请输入任务标题">
                <input class="form-control" v-model="task.owner" type="text" placeholder="请输入负责人">
                <input class="form-control" v-model="task.dueDate" type="date">
                <select class="form-control" v-model="task.level">
                    <option disabled selected>请选择优先级</option>
                    <option value="紧急">紧急</option>
                    <option value="重要">重要</option>
                    <option value="一般">一般</option>
                </select>
                <!-- <select class="form-control">
                    <option value="todo">待处理</option>
                    <option value="重要">处理中</option>
                    <option value="一般">一般</option>
                </select> -->
                <textarea rows="5" class="form-control" v-model="task.disc" placeholder="请输入任务描述"></textarea>
            </div>
            <div class="model-bottom">
                <button class="btn btn-primary" v-on:click="submit()">创建任务</button>
                <button class="btn" v-on:click="closeModel()">取消</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'detailmodel',
        props: {
            disable: {
                type: Boolean,
                required: true
            },
            taskType: {
                type: String,
                required: true
            }
        },
        data: function () {
            return {
                task: {
                    // id: 11,
                    title: '',
                    owner: '',
                    dueDate: '',
                    level: '',
                    tag: this.taskType,
                    disc: ''
                }
            }
        },
        methods: {
            closeModel: function () {
                this.$emit('close');
            },

            submit: function () {
                if (!this.formCheck()) {
                    alert('请输入项目信息！')
                    return;
                }
                var taskData = {
                    type: this.taskType,
                    data: { ...this.task, id: new Date().getTime() }
                }
                //广播添加task的事件，并传递参数
                this.$root.eventHub.$emit('addTask', taskData);
                // this.$root.eventHub
                this.$emit('close');
            },

            formCheck: function () {
                var that = this;
                return Object.keys(this.task).filter(function (item) {
                    return that.task[item] === '';
                }).length === 0
            }
        }
    }
</script>

<style scoped>
    .detail-model {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.5);
        /*弹窗在屏幕中央居中*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .model-box {
        width: 500px;
        border-radius: 4px;
        padding: 20px 0 0;
        background-color: white;
        box-shadow: 1px 1px 7px 3px rgba(0, 0, 0, 0.5);
    }

    .model-content {
        padding: 0 40px;
    }

    .model-bottom {
        padding: 0 40px;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid rgb(216, 216, 216);
    }

    .form-control {
        width: 100%;
        display: block;
        height: 28px;
        border-radius: 3px;
        margin-bottom: 10px;
        border: 1px solid rgb(217, 217, 217);
        padding-left: 10px;
        box-sizing: border-box;
    }

    textarea.form-control {
        height: auto;
    }

    .btn {
        background-color: white;
        padding: 1px 10px;
        border-radius: 3px;
        border: 1px solid rgb(225, 225, 225);
        height: 26px;
        margin-right: 10px;
        font-size: 12px;
        color: rgb(83, 116, 114)
    }

    .btn.btn-primary {
        background-color: rgb(97, 170, 180);
        color: white;
        border-color: rgb(201, 226, 224);
    }
</style>